/** lib **/
import { reactive, onMounted, computed } from 'vue'
/** util **/
import { getBase64Image } from '../../../../assets/ts/util'

export default () => {
  // expertiseImgs
  const expertiseImgs = reactive([
    {
      url: 'https://www.mobapi.com/uploads/2017/09/smart-building.png',
      content: 'building',
      loading: true,
    },
    {
      url: 'https://www.mobapi.com/uploads/2017/09/smart-industry.png',
      content: 'industry',
      loading: true,
    },
    {
      url: 'https://www.mobapi.com/uploads/2017/09/smart-city.png',
      content: 'city',
      loading: true,
    },
    {
      url: 'https://www.mobapi.com/uploads/2017/09/open-data.png',
      content: 'data',
      loading: true,
    },
  ])
  // allLoading
  const allLoading = computed(() => {
    for (let item of expertiseImgs) {
      if (item.loading) {
        return true
      }
    }
    return false
  })
  // onMounted Hook 
  onMounted(() => {
    for (let item of expertiseImgs) {
      let bgimg = new Image()
      bgimg.src = item.url
      bgimg.setAttribute('crossOrigin', 'Anonymous')
      let i = setInterval(() => {
        if (bgimg.complete) {
          clearInterval(i)
          item.url = getBase64Image(bgimg)
          item.loading = false
        }
      }, 1000)
    }
  })
  // @returns
  return {
    expertiseImgs,
    allLoading,
  }
}
